<template>
  <div>
    <el-dialog
      :title="props.id === 0 ? '添加活动' : '编辑活动'"
      :model-value="props.dialogFormVisible"
      @close="cancelFb"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="活动标题">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-col :span="11">
            <el-date-picker
              v-model="form.startDate"
              type="date"
              placeholder="请选择时间"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-col :span="11">
            <el-date-picker
              v-model="form.endDate"
              type="date"
              placeholder="请选择死亡时间"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="上线/下线">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">上线</el-radio>
            <el-radio :label="1">下线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, watch } from "vue";
import * as http from "@/request/http";
// 接收 父组件 传过来的 参数
const props = withDefaults(
  defineProps<{
    // dialogFormVisible 控制窗口的显示/隐藏  由父组件传递过来
    dialogFormVisible: boolean;
    // 当前用户的id (如果是0,表示添加活动; 如果不为0,表示编辑)
    id: number;
  }>(),
  {
    dialogFormVisible: false, // 默认值
    id: 0, // 设置id 默认值
  }
);

const emits = defineEmits<{
  (e: "cancel"): void;
  (e: "confirm"): void;
}>();

const form = reactive({
  title: "",
  startDate: "",
  endDate: "",
  status: 0,
  id: 0,
});

const cancel = () => {
  //取消
  emits("cancel");
};
//添加活动
const tianjia = () => {
  ElMessageBox.confirm("是否要确认?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      //发起请求，添加活动
      http.flash.flashCreate(form).then((res) => {
        //判断是否成功添加活动
        if (res.code === 200) {
          ElMessage.success("成功添加");

          emits("confirm");
        }
      });
    })
    .catch(() => {
      ElMessage.warning("取消添加");
    });
};
//编辑活动
const editFn = () => {
  ElMessageBox.confirm("是否要确认?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      //编辑
      //发起请求，编辑活动
      http.flash.flashUpdate(form).then((res) => {
        //判断是否成功编辑活动
        if (res.code === 200) {
          ElMessage.success("成功编辑");

          emits("confirm");
        }
      });
    })
    .catch(() => {
      ElMessage.warning("取消编辑");
    });
};
const onSubmit = () => {
  //确认
  if (props.id == 0) {
    tianjia(); //添加活动
  } else {
    editFn();
  }
};
const cancelFb = () => {
  emits("cancel");
};

//监听活动id的变化
watch(
  () => props.id,
  () => {
    console.log("用户id变化了...");
    if (props.id != 0) {
      http.flash.flashId(props.id).then((res) => {
        console.log(res);
        Object.assign(form, res.data);
      });
    }
  }
);
</script>

<style scoped>
.el-input {
  width: 300px;
}
</style>
